/** @jsxRuntime classic */
/** @jsx jsxCustomEvent */
import jsxCustomEvent from '@micro-zoe/micro-app/polyfill/jsx-custom-event'
import React, { Suspense, useState } from 'react';
import { Routes, Route, useNavigate } from 'react-router-dom';
import './App.css';

declare global {
  interface Window {
    microApp: any
    __MICRO_APP_NAME__: string
    __MICRO_APP_ENVIRONMENT__: string
  }
}

function App() {

  const [value, setValue] = useState('')
  const [data, setData] = useState({value: ''})
  const [msg, setMsg] = useState({from: 'react', value: ''});

  const navigate = useNavigate();

  const handleApp = (app: string) => {
    navigate(app)
  }

  const handleInput = (e: any) => {
    setValue(e.target.value)
  }

  const handleSend = () => {
    setData({value})
  }

  return (
    <div className="App">
      <div className='mainapp'>
        <div className='header'>
          <span onClick={() => handleApp('react')}>react</span>
          <span onClick={() => handleApp('angular')}>angular</span>
        </div>
        <div>
          <input type="text" value={value} onChange={handleInput}/>
          <button onClick={handleSend}>发送到子应用</button>
        </div>
        <div>
          [{msg.from}]:来自子应用的数据：{JSON.stringify(msg.value)}
        </div>
      </div>
      <div className='subapp'>
        <Suspense fallback={<div>loading</div>}>
          <Routes>
            <Route path='/react' element={
              <micro-app
                data={data}
                onDataChange={(e: any) => setMsg({from: 'react', value: e.detail.data})}
                name='react' // name(必传)：应用名称
                url='http://localhost:3002' // url(必传)：应用地址，会被自动补全为http://localhost:3000/index.html
                baseroute='react'
              ></micro-app>
            }></Route>
            <Route path='/angular' element={
              <micro-app
                data={data}
                name='angular' // name(必传)：应用名称
                onDataChange={(e: any) => setMsg({from: 'angular', value: e.detail.data})}
                url='http://localhost:4300' // url(必传)：应用地址，会被自动补全为http://localhost:3000/index.html
                baseroute='angular'
              ></micro-app>
            }></Route>
          </Routes>
        </Suspense>
      </div>
    </div>
  );
}

export default App;
